<script setup>
const prop = defineProps({
    linkdata:Object
})
console.log(prop.linkdata);

</script>

<template>
    <div class="top">
        <h2 class="title">
            <img :src="prop.linkdata.icon" alt="">
            <div class="linkInfo">
                <div class="linkTitle">{{ prop.linkdata.title }}</div>
                <div class="linkUrl">{{ prop.linkdata.originUrl }}</div>
            </div>
        </h2>
        <div class="top_bottom">
            <div class="tab">
                <div class="tab_item">
                    <span>数据图表</span>
                </div>
            </div>
    </div>
    </div>
</template>

<style lang="scss" scoped>
.top{
    margin-top: -16px;
    position: relative;
    height: 266px;
    box-sizing: border-box;
    background-color: rgb(52,100,224);
    color: #fff;
    padding: 85px 10px 0;
    h2{
        display: flex;
        align-items: baseline;
        img{
            margin-right: 6px;
            width: 28px;
            padding: 2px;
            border-radius: 50%;
            background-color: #fff;
        }
        .linkTitle{
            font-size: 32px;
            line-height: 48px;
            width: 700px;
            white-space: nowrap;
            overflow: hidden;
        /* 超出的部分用...来代替 */
            text-overflow: ellipsis;
        }
        .linkUrl{
            font-weight: 500;
            line-height: 18px;
            width: 700px;
            white-space: nowrap;
            overflow: hidden;
            /* 超出的部分用...来代替 */
            text-overflow: ellipsis;
        }
    }
    .top_bottom{
        .tab{
            position: absolute;
            bottom: 0;
            display: flex;
            .tab_item{
                margin: 0 20px;
                font-weight: 600;
                letter-spacing: 5px;
                font-size: 20px;
                span{
                    cursor: pointer;
                    display: block;
                    padding: 8px 5px;
                }
            }
        }}
}
</style>